<template>
  <div>
    <div style="border-bottom: 1px solid #EEEEEE;">
      <el-form :model="filterData" ref="filerData" label-width="0" size="mini">
        <el-row :gutter="20">
          <el-col style="width: 300px;display: flex;line-height: 30px;">
              <div style="width: 90px;">供应商名称:</div>
              <el-input v-model="filterData.title" placeholder="采购供应商名称" clearable></el-input>
           </el-col>
          <el-col style="width: 200px;">
            <el-form-item>
              <el-input v-model="filterData.supuser" placeholder="联系人" style clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px;">
            <el-form-item>
              <el-input v-model="filterData.supmobile" placeholder="联系电话" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px;">
            <el-form-item>
              <el-input v-model="filterData.bankname" placeholder="开户行名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px;">
            <el-form-item>
              <el-input v-model="filterData.banknumber" placeholder="银行账号" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 300px;display: flex;line-height: 30px;">
              <div style="width: 80px;">所属账套:</div>
              <el-select v-model="filterData.account" filterable placeholder="账套" style="width: 100%;" clearable>
                <el-option :label="item.name" :value="item.name" v-for="(item,index) in accounts" :key="index"></el-option>
              </el-select>
           </el-col>
          <el-col style="width: 12px;">
            <el-form-item label="" label-width="0">
              <el-button type="primary" icon="el-icon-search" @click="handlerQuery">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div style="margin: 10px 0px 10px;">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleCreate">添加供应商</el-button>
    </div>
    <div class="table-wraper">
      <el-table border :data="tableData" height="100%"
        :header-cell-style="{'background-color': '#f5f7f9','color':'#666',border:'1px solid #f0f0f0'}">
        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
        <el-table-column label="采购供应商名称" prop="title" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column label="开户行" prop="bankname" width="200px"  show-overflow-tooltip></el-table-column>
        <el-table-column label="银行账号" prop="banknumber" width="150px"></el-table-column>
        <el-table-column label="注册地址" prop="address" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column label="信用代码" prop="suptaxid" width="160px"></el-table-column>
        <el-table-column label="注册电话" prop="mobile" width="100px"></el-table-column>
         <el-table-column label="备注" prop="memo" show-overflow-tooltip></el-table-column>
        <el-table-column label="所属账套" prop="account" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="80px" align="center" fixed="right">
          <template v-slot="scope">
            <el-button-group>
              <el-button size="mini" circle icon="el-icon-edit-outline" title="编辑供应商资料"
                @click="handleEdit(scope.$index,scope.row)">
              </el-button>
              <el-button size="mini" circle icon="el-icon-delete" type="danger" title="删除"
                @click="handleDelete(scope.$index,scope.row)"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>

      <div style="display: flex;">
        <div style="flex: 1; line-height: 45px;">
          <span style="margin-right: 20px;">记录总数:{{listcount}}</span>
        </div>
        <div style="margin-top: 10px; text-align: right;">
          <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
            layout=" prev, pager, next,sizes,total" :page-sizes="[50, 100, 150]" :total="listcount"
            :page-size="pagesize" :current-page="curpage" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <EditUI ref="editUI" v-if="editVisible" @updateComplete="handleEditCallbalck"></EditUI>
    <CreateUI ref="createUI" v-if="createVisible" @closeHandler="handleCreateCallback"></CreateUI>
  </div>
</template>

<script>
  import EditUI from './Edit.vue';
  import CreateUI from './Create.vue';

  export default {
    components: {
      EditUI,
      CreateUI,
    },
    data() {
      return {
        curpage: 1,
        total: 1,
        createVisible: false,
        filterData: {
          supname: '',
          supmobile: '',
          supuser: '',
          bankname: '',
          account:'',
        },
        accounts:[],
        sum: 0,
        curpage: 1,
        pagesize: 50,
        listcount: 1,
        tableData: [],
        editVisible: false
      }
    },
    mounted() {
      this.loadAccount();
      this.loadDataList();
    },
    methods: {
      loadAccount(){
        this.axios.post("api/admin/account/list").then(res=>{
          if(res.status==200&& res.data.code==0){
             this.accounts=res.data.list;
          }
        })
      },
      handlerQuery() {
        this.curpage = 1;
        this.loadDataList();
      },
      loadDataList() {
        const params = {
          title: this.filterData.title,
          supuser: this.filterData.supuser,
          supmobile: this.filterData.supmobile,
          bankname: this.filterData.bankname,
          banknumber: this.filterData.banknumber,
          account:this.filterData.account,
          curpage: this.curpage,
          pagesize: this.pagesize
        }
        this.axios.post("api/admin/buysupplier/list", params).then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
            this.curpage = res.data.curpage;
            this.listcount = res.data.num;
          }
        })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleEdit(index, row) {
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.initData(index, JSON.parse(JSON.stringify(row)));
        })
      },
      handleEditCallbalck(index, data) {
        this.tableData[index].supname = data.supname;
        this.tableData[index].supuser = data.supuser;
        this.tableData[index].supmobile = data.supmobile;
        this.tableData[index].legalman = data.legalman;
        this.tableData[index].suptaxid = data.suptaxid;
        this.tableData[index].bankname = data.bankname;
        this.tableData[index].banknumber = data.banknumber;
        this.tableData[index].mobile = data.mobile;
        this.tableData[index].supid = data.supid;
        this.tableData[index].memo = data.memo;
      },
      handleDelete(index,row) {
        let confirmText = ["正在删除采购供应商:", "供应商名称: " + row.title, "所属账套:" + row.account];
        const newDatas = [];
        const h = this.$createElement;
        for (const i in confirmText) {
          newDatas.push(h('p', null, confirmText[i]));
        }
        this.$confirm("提示", {
          message: h('div', null, newDatas),
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: 'error'
        }).then(() => {
          this.axios.post("/api/admin/buysupplier/delete", {
            id: row.id
          }).then(res => {
            if(res.status==200 && res.data.code){
              this.$message({
              	message: "删除供应商成功!",
              	showClose: true,
              	type: 'success',
              	duration: 1500,
              });
                this.loadDataList();
            }
          })
        }).catch(() => {

        })

      },

      handleCreate() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
          this.$refs.createUI.initData();
        })
      },
      handleCreateCallback() {
        this.loadDataList();
      }
    }
  }
</script>

<style scoped>
  .table-wraper {
    height: calc(100vh - 250px);
  }
</style>
